<template>
  <div class="informationTab">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item
        v-for="item in text"
        :key="item.id"
        :index="item.id"
        @click="jumpToChild(item.url)"
        >{{ item.textName }}</el-menu-item
      >
      <el-button type="primary" @click="$router.back(-1)" class="backBtn"
        >返回</el-button
      >
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'InformationTab',
  data() {
    return {
      text: [
        {
          id: '0',
          textName: '基本资料',
          url: '/information/baseinfo',
        },
        {
          id: '1',
          textName: '联系人',
          url: '/information/123',
        },
        {
          id: '2',
          textName: '跟单管理',
          url: '/information/gendanlist',
        },
        {
          id: '3',
          textName: '订单管理',
          url: '/information/clientname',
        },
        {
          id: '4',
          textName: '合同管理',
          url: '/information/contranct',
        },
        {
          id: '5',
          textName: '售后管理',
          url: '/information/afterSaleInformation',
        },
        {
          id: '6',
          textName: '财务管理',
          url: '/afterSale/afterSaleAdd',
        },
        {
          id: '7',
          textName: '工单管理',
          url: '/afterSale/afterSaleAdd',
        },
        {
          id: '8',
          textName: '附件管理',
          url: '/afterSale/afterSaleAdd',
        },
        {
          id: '9',
          textName: '用户共享',
          url: '/afterSale/afterSaleAdd',
        },
        {
          id: '10',
          textName: '操作记录',
          url: '/afterSale/afterSaleAdd',
        },
      ],
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    jumpToChild(url) {
      this.$router.push(url);
    },
    SetDefault() {
      this.text.forEach((item) => {
        if (item.url === this.$router.history.current.path) {
          this.activeIndex = item.id;
          console.log(item.id, item.url);
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.SetDefault();
    console.log('路由：', this.activeIndex, this.$router.history.current.path);
  },
};
</script>

<style >
.backBtn {
  position: relative;
  right: -20px;
  top: 10px;
}
</style>